/**
* Created by yyr on 2017/1/15
*已设立基金编辑选项卡基金支出 编辑页
*/
<template>
    <div>
        <div class="ca-box-border-top-none ca-p-22">
            <el-col :span="12" class="ca-title">
                <h3>支出信息</h3>
            </el-col>
            <el-col :span='12' class="ca-align-right">
                <div>
                    <el-button type="primary" @click="saveFundExpenditure()" size="medium">保存</el-button>
                    <el-button  @click="cancel()" size="medium">取消</el-button>
                </div>
            </el-col>
            <div class="ca-m-t-20">
                <table class="ca-table">
                    <tr>
                        <th width="15%">支出时间</th>
                        <th width="15%">支出类型</th>
                        <th width="15%">金额(万元)</th>
                        <th width="50%">备注</th>
                        <th width="5%" class="p-tb-0"><button type="button" class="ca-btn ca-btn-round" @click="addExpenditure()"><i class="fa fa-plus"></i></button></th>
                    </tr>
                    <tr v-for="(row,index) in expenditureDataList" :key="index">
                        <td><el-date-picker type="date"  v-model='row.costTime' placeholder="选择日期" style="width:100%"></el-date-picker></td>
                        <td>
                            <el-select v-model="row.costType" placeholder="请选择" style="width: 100%">
                                <el-option
                                    v-for="item in expenditureType"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </td>
                        <td><el-input placeholder="请输入内容" type="number" v-model="row.money" class="ca-vertical-align-middle"></el-input></td>
                        <td><el-input placeholder="请输入内容" :maxlength="200" v-model="row.remarks"></el-input></td>
                        <td class="p-tb-0"><button type="button" class="ca-btn ca-btn-round" @click="deleteExpenditure(index,row.id)"><i class="fa fa-remove"></i></button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp'
    export default {
        data() {
            return {
                itemId: this.$route.params.fundId,
                expenditureDataList: [],//保存时传参
                expenditureData: {
                    costTime: '',
                    costType: '',
                    fundId: this.$route.params.fundId,
                    id: '',
                    money: '',
                    remarks: ''
                },
                expenditureType: this.$store.state.user.dictionaryMap.fundCost,
                expenditure_type: 1,
            }
        },
        props: {},
        created() {
            this.getFundExpenditure();
        },
        mounted() {
        },
        methods: {
            //获取基金支出列表
            getFundExpenditure() {
                apiHttp(api.FUND_EXPENDITURE,{fundId: this.itemId}).then( ret=>{
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.expenditureDataList = ret.data ? ret.data : [];
                    }
                })
            },
            //保存支出信息
            saveFundExpenditure() {
                apiHttp(api.ADD_FUND_EXPENDITURE,this.expenditureDataList).then(ret=>{
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            center: true
                        });
                        this.$emit('addRedDot')
                        this.cancel();
                    }
                })
            },
            //删除支出信息
            deleteExpenditure(index,id) {
                this.$confirm('是否删除已有支出信息?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                    showClose: false
                }).then(() => {
                    if (!id) {
                        this.expenditureDataList.splice(index,1)
                    } else {
                        apiHttp(api.DELETE_FUND_EXPENDITURE, {id: id}).then(ret=>{
                            if (ret.resCode === STATUS_HTTP_SUCCESS) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!',
                                    center: true
                                });
                                this.getFundExpenditure();
                            }
                        });
                    }
                })
            },
            //取消
            cancel() {
                this.$emit('isEdit',false)
            },
            addExpenditure() {
                this.expenditureDataList.push(Object.assign({},this.expenditureData))
            }
        },
        components: {

        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ca-title{
    height:50px;
}
table td{
    padding: 5px 5px;
    box-sizing: border-box;
}
</style>
